<template>
    <div class="category_tree">
        <el-tree :data="pmsCategoryTree" :props="defaultProps" :accordion="true" @node-click="nodeClick" />
    </div>
</template>

<script setup lang="ts" name="CategoryTree">
import { pmsCategoryListTree } from '@/api/mall/pmsCategory';
import type { pmsCategoryType } from '@/api/mall/pmsCategory/types';
import { ref } from 'vue'
import { onMounted } from 'vue';

const emit = defineEmits(['query'])

let pmsCategoryTree = ref<pmsCategoryType[]>()
const loading = ref(false)

const defaultProps = {
    children: 'children',
    label: 'name',
}

onMounted(() => {
    loadPmsCategoryTree();
})

const loadPmsCategoryTree = async () => {
    try {
        loading.value = true
        const data = await pmsCategoryListTree()
        if (data.code === 200) {
            pmsCategoryTree.value = data.data
        }
    } finally {
        loading.value = false
    }
}

const nodeClick = (data: pmsCategoryType) => {
    if (data.catLevel === 3) {
        // 触发右侧的菜单查询
        emit('query', data.catId)
    }
}
</script>

<style scoped lang="scss">
.category_tree {
    width: 200px;
    box-sizing: border-box;
    margin-right: 20px;
}
</style>